<template>
    <div class="main_container">
        <el-row style="height: 40px;line-height: 40px;margin: 10px 20px 25px 20px;">
            <el-col :span="6">
                <el-radio-group v-model="filterType" @change="radioChange">
                    <el-radio label="1">按条件筛选</el-radio>
                    <el-radio label="2">按日期范围</el-radio>
                </el-radio-group>
            </el-col>
            <el-col :span="7" v-if="filterType=='1'">
                <el-select style="width: 280px;" v-model="order_type" placeholder="请选择"
                    @change="typeChange" clearable>
                    <el-option v-for="item in filterTypes" :key="'filter_'+item.value" 
                        :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="7" v-else>
                <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                    v-model="dateRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                    :picker-options="handleTime" @change="dateChange"
                    placeholder="请选择日期范围" style="width: 280px;" clearable></el-date-picker>
            </el-col>
            <el-col :span="11">
                <div class="btns">
                    <!-- <el-button size="small" style="margin-right: 10px;" icon="el-icon-upload2" @click="handleExport">导出</el-button>
                    <el-button size="small" class="btn_primary_color" icon="el-icon-printer" @click="handlePrint">打印</el-button> -->
                </div>
            </el-col>
        </el-row>

        <pie-chart :pieData="chartData" :customStyle="customStyle" :showLegend="true" 
            :totalValue="totalCount" seriesName="提成"></pie-chart>

        <div class="common_line"></div>
        
        <el-table border :data="tableData" :summary-method="getSummaries" show-summary style="margin-top: 15px;">
            <el-table-column label="员工姓名" align="center" prop="title" />
            <el-table-column label="开单数量" align="center" prop="sale_order_count" />
            <el-table-column label="退单数量" align="center" prop="sale_return_count" />
            <el-table-column label="销售占比" align="center" prop="commission_percent" />
            <el-table-column label="提成" align="center" prop="commission_total_name" />
        </el-table>
    </div>
</template>

<script>
import { staffCommission } from '@/api/statistics'
import pieChart from '@/components/pieChart';

export default {
    name: 'commission',
    components: {
        pieChart
    },
    data() {
        return {
            filterType: '1',  //1 按条件  2 按日期范围
            filterTypes: [
                {id: 1, label: '今日', value: 'cur_day'},
                {id: 2, label: '本周', value: 'cur_weak'},
                {id: 3, label: '本月', value: 'cur_month'},
                {id: 4, label: '本季度', value: 'cur_quarter'},
                {id: 5, label: '本年度', value: 'cur_year'},
            ],
            params: {
                corp_id: '',
                start_date: '',
                end_date: '',
                order_type: 'cur_month'
            },
            order_type: 'cur_month',
            dateRange: [],
            handleTime: {
                disabledDate(date) {
                    //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                    return date.getTime() > Date.now();
                }
            },
            customStyle: {
                width: '600px',
                height: '300px',
                paddingRight: '74px'
            },
            totalCount: 0,
            tableData: [],
            chartData: []
        }
    },
    created() {
        this.params.corp_id = this.$store.state.corpId
        let nowDate = new Date()
        this.params.start_date = nowDate.getFullYear()+'-'+this.add0(nowDate.getMonth()+1)+'-01'
        this.getData()
    },
    methods: {
        // 补零
        add0(num) {
            if (parseInt(num) < 10){
                num = '0'+ num
            }
            return num
        },
         getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = '--';
                }
            });

            return sums;
        },
        // 获取数据
        getData() {
            var that = this
            staffCommission(this.params).then(res => {
                that.totalCount = 0
                let chartDatas = []
                let lists = res.data.data.filter(item => {
                    item.title = item.username
                    item.commission_percent += '%'
                    that.totalCount += item.commission_total
                    return item
                })
                lists.forEach(item => {
                    if (!that.totalCount){
                        item.rate = 0
                        item.rateName = '--'
                    }else {
                        item.rate = (item.commission_total / that.totalCount).toFixed(2)
                        item.rateName = (item.commission_total / that.totalCount * 100).toFixed(2)+'%'
                    }
                    item.commission_total_name = item.commission_total.toFixed(2)
                    if (item.commission_total > 0){  //亏损的不展示
                        chartDatas.push({
                            name: item.title,
                            value: item.commission_total
                        })
                    }
                });
                that.chartData = chartDatas
                that.tableData = lists
            })
        },
        radioChange(val) {
            if (val == '1'){
                this.typeChange(this.order_type)
            }else{
                this.dateChange(this.dateRange)
            }
        },
        typeChange(val) {
            if (!val) return

            let nowDate = new Date()
            if (val.indexOf("cur_")<0){
                this.params.start_date = nowDate.getFullYear()+'-01-01'
                if(val == 'day'){  //本月，28~31天
                    this.params.start_date = nowDate.getFullYear()+this.add0(nowDate.getMonth()+1)+'-01'
                }
            }else{
                this.params.start_date = ''
            }
            this.params.order_type = val

            this.getData()
        },
        dateChange(value) {
            if(value && value.length){
                this.params.start_date = value[0]
                this.params.end_date = value[1]
                this.params.order_type = 'customize_date'
                this.getData()
            }
            else{
                this.params.start_date = this.params.end_date = null
                this.params.order_type = ''
                this.tableData = []
            }
        },
        // 导出
        handleExport() {

        },
        // 打印
        handlePrint() {

        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .btns {
        float: right;
        height: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
    }
    .top_title {
        font-size: 14px;
        color: #606266;
    }
    .money {
        font-size: 20px;
        // color: red;
    }
    .red {
        color: red;
    }
    .green {
        color: @blue;
    }
</style>